<template>
  <div>
    <el-pagination
      v-if="showPage"
      v-model:current-page="pageData.current"
      class="system-page"
      background
      :layout="pageLayout"
      :pager-count="11"
      :total="pageData.total"
      :page-size="pageData.size"
      :page-sizes="pageSizes"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    showPage: { type: Boolean, default: true }, // 是否展示页级组件，默认是
    //响应分页数据
    pageData: {
      type: Object,
      default: () => {
        return { current: 1, size: 10, total: 10 };
      },
    },
    pageLayout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    }, // 分页需要显示的东西，默认全部
    pageSizes: { type: Array, default: [10, 20, 50, 100] }, //每页显示的数据量
  },
  setup(props, context) {
    // 分页相关：监听页码切换事件
    const handleCurrentChange = (val) => {
      props.pageData.current = val;
      context.emit("getTableData");
    };

    // 分页相关：监听单页显示数量切换事件
    const handleSizeChange = (val) => {
      props.pageData.size = val;
      context.emit("getTableData", true);
    };

    return {
      handleCurrentChange,
      handleSizeChange,
    };
  },
});
</script>
<style lang="scss" scoped>
div {
  text-align: right;
  box-sizing: border-box;
}
.system-page {
  margin-top: 20px;
}
:deep( .el-pagination .btn-next .el-icon){
  display: inline-block;
}
:deep(.el-pagination .btn-prev .el-icon ){
  display: inline-block;
}
</style>
